<template>
  <div class="evaluatepage">
    <div class="eva_main">
      <div class="sample_box">
        <div class="sample_lists" v-for="(item,index) in samplelists" :key="index">
            <h5>塑造结果{{index+1}}</h5>
            <div class="sample_container">
                <video v-if="item.type == 1" :src="item.url" controls></video>
                <audio class="audio" v-else-if="item.type == 2" :src="item.url" controls></audio>
                <img v-else-if="item.type == 3" :src="item.url" alt="">
            </div>
        </div>
      </div>

      <div class="eva_name">
        <div class="eva_name_input_name">
            <span>模型名称：</span>
            <el-input v-model="programName" disabled></el-input>
        </div>
        <div class="eva_name_input_num">
            <span>评分：</span>
            <el-input v-model="personalScore" placeholder="请输入评分" ></el-input>
            <div style="font-size:12px;margin-left:50px;color: #ccc" >分值范围 0~5，可保留一位小数</div>
        </div>
      </div>

      <div class="eva_standard">
        <span>评分标准：</span>
        <div class="eva_table">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              min-width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              min-width="180">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="create">
      <el-button  @click="back" class="bac">返回</el-button>
      <el-button  @click="submitForm" class="add">立即评价</el-button>
    </div>
    
  </div>
</template>

<script>
import { getMouldResultInfos , mouldProgramEvaluation} from '../../../api/index'
export default {
  data(){
      return{
        samplelists:[],
        personalScore:'', //评分
        tableData:[{
          name:'大于等于4.5（特优秀）',
          type:'察觉不到任何不自然'
        },{
          name:'大于等于4.0，小于4.5（优秀）',
          type:'效果很不错，几乎察觉不到不自然'
        },{
          name:'3.5~4.0（良好）',
          type:'效果还可以，能察觉的一点不自然'
        },{
          name:'大于等于3.0，小于3.5（合格）',
          type:'能察觉不自然但可以接受'
        },{
          name:'大于等于2.0，小于3.0（不合格）',
          type:'明显察觉不自然但可忍受'
        },{
          name:'小于2.0（低劣）',
          type:'完全不自然，无法接受'
        },],
        programName:'',
      }
  },
  mounted(){
    this.init()
    this.programName = this.$route.query.programName
  },
  methods:{
    init(){
        console.log(this.$route)
        let programId = this.$route.query.programId
        let params = {programId}
        getMouldResultInfos(params).then(res=>{
            console.log(res)
            let re = res.data.data
            re.forEach((el,index) => {
                console.log(index)
                let type = _.last(el.outputPath.split('.'))
                console.log(type)
                if ( type == 'mp4'){
                    this.samplelists.push({
                        label: `塑造结果${index}`,
                        type: 1,
                        url: el.outputPath,
                    })
                }else if(type == 'wav'){
                    this.samplelists.push({
                        label: `塑造结果${index}`,
                        type: 2,
                        url: el.outputPath,
                    })
                }else if(type == 'png' || type == 'jpg'|| type == 'jpeg'){
                    this.samplelists.push({
                        label: `塑造结果${index}`,
                        type: 3,
                        url: el.outputPath,
                    })
                }
            });
        })
    },
    back(){
      this.$router.push('/home/evaluate')
    },
    submitForm(){
      if(Number(this.personalScore) >= 0 && Number(this.personalScore) <= 5){
        let query = this.$route.query
        let id = query.id
        let programId = query.programId
        let programName	 = query.programName
        let programType = query.programType
        let personalScore = Number(this.personalScore)
        let params = {id,programId,programName,programType,personalScore}
        mouldProgramEvaluation(params).then(res=>{
          console.log(res)
          if(res.data.status == 0){
            this.$router.push('/home/evaluate')
            this.$message({
              message: '评价成功',
              type: 'success'
            });
          }else{
            this.$message.error(res.data.message)
          }
        })
      }else{
        this.$message.error('请输入正确评分')
      }
      
    }
  }

}
</script>

<style lang='less' scoped>
.evaluatepage{
  width: 100%;
  // height: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  .eva_main{
    // height: 716px;
    padding-bottom: 20px;
    margin-bottom: 50px;
    box-sizing: border-box;
    background-color: #282C41;
    /deep/.el-radio {
      color: #fff;
    }
    /deep/.el-radio__input.is-checked+.el-radio__label {
        color: #fff;
    }
    .sample_box{
        width: 100%;
        // height: 350px;
        padding: 40px 90px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .sample_lists{
            color: #fff;
            margin-right: 73px;
            width: 100%;
            height: 100%;
            h5{
              margin-bottom: 10px;
            }
            .sample_container{
                width: 530px;
                height: 312px;
                video{
                    max-width: 530px;
                    max-height: 312px;
                }
                img{
                    max-width: 530px;
                    max-height: 312px;
                }
                audio{
                    max-width: 530px;
                    max-height: 312px;
                }
            }
        }
    }
    .eva_name{
        width: 100%;
        padding: 10px 90px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        /deep/.el-input__inner {
            background-color: #4F5367;
            border-color: #7A7F8E;
            color: #fff;
        }
        .eva_name_input_name{
          width: 400px;
          display: inline-block;
          /deep/.el-input{
            width: 300px;
          }
          
        }
        .eva_name_input_num{
          width: 400px;
          display: inline-block;
          /deep/.el-input {
            width: 150px;
          }
        } 
    }
    .eva_standard{
      width: 100%;
      padding: 10px 90px;
      box-sizing: border-box;
      color: #fff;
      display: flex;
      .eva_table{
        width: 520px;
        
        /deep/.el-table td.el-table__cell div {
            font-size: 12px;
        }
        /deep/.el-table .el-table__cell {
          padding: 5px 0;
        }
        /deep/.el-table th.el-table__cell {
            background: #4F5367!important;
            color: #fff!important;
        }
        /deep/.el-table tr {
            background-color: #3C4052;
            color: #fff;
        }
        /deep/.el-table th.el-table__cell>.cell {
          border-right: 1px solid #fff;
          padding-left: 14px!important;
        }
        /deep/.el-table th.el-table__cell:last-child >.cell {
          border-right: 0;
        }
        // /deep/.el-table th.el-table__cell:first-child >.cell {
        //   border-right: 0;
        // }
        /deep/.el-table_body tr.hover_row>td.el-table_cell{
          background-color: red!important;
        }
        /deep/.el-button--text {
          color: #3FC1FF;
        }
        /deep/.el-table__body-wrapper {
          background-color: #3C4052;
        }
        /deep/.el-table__header-wrapper {
            display: none;
        }
        /deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
            background-color: #3C4052;
        }
      }
      tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
    }
    
  }
  
  

  .create{
    position: fixed;
    width: calc(100% - 200px);
    height: 50px;
    background-color: #282C41;
    bottom: 0;
    left: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;
    box-sizing: border-box;
    .bac{
      background-color: transparent;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 2px;
      width: 122px;
    }
    .add{
      color: #63E9FF;
      border: 1px solid #00CEF0;
      background-color: rgba(49, 203, 236, 0.1400);
      border-radius: 2px;
      width: 122px;
    }
  }
}
</style>